<template>
    <div class="page">
        <div class="content rbosDet">
            <div class="actTopWrap">
                <div class="FitHeight20"></div>
                <div class="actHead flex-container">
                    <a href="javascript:;" @click="$router.back()" class="left"></a>
                    <h1>我的如意宝</h1>
                    <a class="rightTxt">如意宝规则</a>
                </div>
                <div class="atInfor">
                    <p>昨日收益 (元)</p>
                    <h3>0.01</h3>
                </div>
            </div>
            <div class="flex-container detail">
                <div>
                    <p>如意宝余额 (元)</p>
                    <p>2.66</p>
                </div>
                <div>
                    <p>累计收益 (元)</p>
                    <p>2.66</p>
                </div>
                <div>
                    <p>七日年化收益率 (元)</p>
                    <p>2.66</p>
                </div>
                <div>
                    <p>每万份收益 (元)</p>
                    <p>2.66</p>
                </div>
            </div>
            <div id="myChart" class="myChart"></div>
        </div>
        <div class="rboosBtns flex-container">
            <router-link to="/">转出</router-link>
            <router-link to="/">转入</router-link>
        </div>
    </div>
</template>

<script>
    import ECharts from 'echarts/lib/echarts';
    import 'echarts/lib/chart/line';
    export default {
        data(){
            return {
                myChart: null,
                option: []
            }
        },
        mounted(){
            console.log('如意宝');
            this.myChart = ECharts.init(document.getElementById('myChart'));
            this.myChart.setOption({
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLabel:{
                        color:'#999'
                    }
                },
                yAxis: {
                    type: 'value',
                    areaStyle: {
                        normal: {  color:['#339933']}
                    },
                    axisLabel:{
                        color:'#999'
                    }
                },
                grid:{
                    x:50,
                    y:20,
                    x2:20,
                    y2:25
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    areaStyle: {
                        normal: {  color:'#EBF4FD'}
                    },
                    itemStyle : {
                        normal : {
                            color:'#6FDDB1',
                            lineStyle:{
                                color:'#6FDDB1'
                            }
                        }
                    }
                }]
            })
        },
        activated(){
            console.log('activated-如意宝');
        }
    }
</script>
<style scoped>
    .page{padding-top: 0!important;padding-bottom: 3.3rem !important;}
    .myChart{height: 10rem;background: #fff;padding: 0.5rem 0 1rem;}
    .detail{flex-wrap: wrap;background:#F5FFFB;padding: 1rem 1rem 0;}
    .detail > div{width: 50%;color: #686770;font-size: 0.6rem;margin-bottom: 1rem;}
    .detail > div p:last-child{font-size: 0.8rem;margin-top: 0.4rem;}
    .detail > div:nth-child(odd){border-right: 1px solid #eee;}
    .detail > div:nth-child(even){text-indent: 1.5rem;}
    .rboosBtns{position: fixed;bottom: 0;left: 0;width: 100%;height: 2.3rem;line-height: 2.3rem;text-align: center;background: #fff;font-size: 0.8rem;}
    .rboosBtns a{flex: 1;color: #686770;}
    .rboosBtns a:last-child{color: #fff;background: #6fddb1;}
    a.rightTxt{width: auto;font-size: 0.6rem;color: #686770;}
    .actTopWrap{height: 9rem;}
    .atInfor{margin-top: 1rem;padding: 0 0.75rem;}
    .atInfor h3{color: #fff;font-size: 1.5rem;text-align: center;margin-top: 1rem;}
</style>
